<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import CommentsComponent from '@/components/Comments/index.vue'
import RichText from '@/components/RichText/index.vue'
import fakeData from './data'

// 定义页面
definePage({
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '热点新闻',
  },
})

// 状态参数
const state = reactive({
  title: '新闻的标题',
  catalog: '资讯新闻',
  time: '2025-03-06',
  content: '',
  read: 233,
  isOriginal: true,
})

// 模拟请求
onMounted(async () => {
  state.content = fakeData.html
})
</script>

<template>
  <view>
    <view class="main">
      <view class="title">
        {{ state.title.repeat(20) }}
      </view>
      <view class="post">
        <view class="info">
          <view class="catalog">
            <nut-tag type="danger">
              {{ state.catalog }}
            </nut-tag>
          </view>
          <view class="time">
            {{ state.time }}
          </view>
        </view>
        <view class="share">
          <nut-icon name="share" size="20" />
        </view>
      </view>
      <view class="content">
        <RichText v-model="state.content" />
      </view>
      <view class="suffix">
        <text class="read">
          {{ state.read }} 浏览
        </text>
        <text v-if="state.isOriginal" class="mark">
          来源：本站原创
        </text>
      </view>
    </view>
    <CommentsComponent />
  </view>
</template>

<style lang="scss" scoped>
  page {
    background-color: #fff;
  }
  .main {
    padding: 20rpx;
    border-bottom: 20rpx solid #f5f5f5;
  }
  .title {
    font-size: 36rpx;
    line-height: 1.5;
    margin-bottom: 40rpx;
  }
  .post {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    .info {
      display: flex;
      align-items: center;
      flex: 1;
      .catalog {
        margin-right: 20rpx;
        .nut-tag {
          font-size: 24rpx;
          padding: 5rpx 10rpx;
        }
      }
      .time {
        font-size: 24rpx;
        color: #999;
      }
    }
    .share {
      font-size: 24rpx;
      color: #999;
      padding: 5rpx 10rpx 0 20rpx;
    }
  }
  .content {
    margin: 20rpx 0;
  }
  .suffix {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #999;
  }
</style>
